<template>
    <div id="login">
      <div class="login-title-logo">
        <img class="logo-header" src="static/logoh.png" alt="">
        <p class="title-name">BestProperty</p>
        <p class="balck"></p>
      </div>
      <div class="demo-ruleForm login-container">
        <div class="lang-img" @click="changeLang">
          <img :src="langImage" alt="">
        </div>
        <h3 class="title">{{$t('m.Login')}}</h3>
        <el-tabs v-model="activeName"  type="card">
          <el-tab-pane label="Facebook" name="first">
            <el-form>
              <div style="margin-top:20px;">
                <el-form-item>
                  <el-button class="facebook-btn" style="width:100%;" :loading="loading"  @click="faceBookLogin"><i :style="{backgroundImage: 'url(' + require('../../static/fb-icon.png') + ')'}" class="facebook-icon"></i>Login with Facebook</el-button>
                </el-form-item>
                <!--<el-form-item>-->
                <!--<div id="googleBtn" class="google-btn"></div>-->
                <!--</el-form-item>-->
              </div>
            </el-form>
            <router-link to="/register" class="index-page-a">{{$t('m.CreateAccount')}}</router-link>
          </el-tab-pane>
          <!--隐蔽手机号登陆-->
          <el-tab-pane label="SMS" name="second">
            <el-form>
              <div style="margin-top:20px;">
                <el-form-item>
                  <el-button class="sms-btn" style="width:100%;" :loading="loading"  @click="smsLogin">SMS</el-button>
                </el-form-item>
              </div>
            </el-form>
            <!--<el-form :model="loginUser" :rules="rules" ref="loginUser" label-position="left"-->
                     <!--class="demo-ruleForm">-->
              <!--<el-form-item prop="phone" :label="$t('m.Yourregisterphonenumber')">-->
                <!--<el-input v-model="loginUser.phone" auto-complete="off"></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item style="margin-bottom:0;">-->
                <!--<el-button class="smsBtn" :disabled="sendMsgDisabled" @click="submitSms('loginUser')">-->
                  <!--<span v-if="sendMsgDisabled">{{'Resend SMS password to my phone ' + time + 's'}}</span>-->
                  <!--<span v-else>{{$t('m.SendSMSpasswordtomyphone')}}</span>-->
                <!--</el-button>-->
              <!--</el-form-item>-->
              <!--<el-form-item prop="sms" :label="$t('m.SMSPassword')">-->
                <!--<el-input v-model="loginUser.sms" :maxlength="4" auto-complete="off" @keyup.enter.native="submitForm('loginUser')"></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item>-->
                <!--&lt;!&ndash; v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.1)"&ndash;&gt;-->
                <!--<el-button type="warning" style="width:100%;" :loading="loading" @click="submitForm('loginUser')">{{$t('m.Login')}}-->
                <!--</el-button>-->
              <!--</el-form-item>-->
            <!--</el-form>-->
            <router-link to="/register" class="index-page-a">{{$t('m.CreateAccount')}}</router-link>
          </el-tab-pane>
          <el-tab-pane :label="$t('m.Password')" name="third">
            <el-form :model="loginWithNamePassWord" :rules="rulesloginWithNamePassWord" ref="loginWithNamePassWord" label-position="left"
                     class="demo-ruleForm">
              <el-form-item prop="account" label="Username" style="margin-bottom:5px;">
                <el-input v-model="loginWithNamePassWord.account" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item :label="$t('m.Password')" prop="password">
                <el-input type="password" v-model="loginWithNamePassWord.password" auto-complete="off" @keyup.enter.native="submitNamePasswordForm('loginWithNamePassWord')"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="warning" style="width:100%;" :loading="loading" @click="submitNamePasswordForm('loginWithNamePassWord')">{{$t('m.Login')}}
                </el-button>
              </el-form-item>
            </el-form>
            <router-link to="/register" class="index-page-a">{{$t('m.CreateAccount')}}</router-link>
            <!--<router-link to="/resetPassword" class="index-page-a" style="float:right;color:rgb(14, 108, 156);">{{$t('m.ForgotPassword')}}</router-link>-->
          </el-tab-pane>
          <el-tab-pane label="Google/Email" name="four">
            <el-form>
              <div style="margin-top:20px;">
                <el-form-item>
                  <div id="googleBtn" class="google-btn"></div>
                </el-form-item>
                <div style="text-align: center">or</div>
                <el-form :model="loginWithPassWord" :rules="rulesWithPassword" ref="loginWithPassWord" label-position="left"
                         class="demo-ruleForm">
                  <!--隐蔽手机号登陆-->
                  <el-form-item prop="account" :label="$t('m.EmailorPhone')" style="margin-bottom:5px;">
                    <el-input v-model="loginWithPassWord.account" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('m.Password')" prop="password">
                    <el-input type="password" v-model="loginWithPassWord.password" auto-complete="off" @keyup.enter.native="submitPasswordForm('loginWithPassWord')"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="warning" style="width:100%;" :loading="loading" @click="submitPasswordForm('loginWithPassWord')">{{$t('m.Login')}}
                    </el-button>
                  </el-form-item>
                  <el-form-item>
                    <div style="color: rgb(255, 0, 51);line-height: 20px">*Google, email or phone password will be removed soon, please use facebook, sms or username  to login.</div>
                  </el-form-item>
                </el-form>
              </div>
            </el-form>
            <router-link to="/register" class="index-page-a">{{$t('m.CreateAccount')}}</router-link>
            <router-link to="/resetPassword" class="index-page-a" style="float:right;color:rgb(14, 108, 156);">{{$t('m.ForgotPassword')}}</router-link>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style="text-align:center;">
        <p>Customer support</p>
        <p>09967611168 | 09951203008</p>
      </div>
    </div>
</template>

<script>
  import {loginUser, sendSmsUser,loginWithGoogle,loginWithFaceBook, loginWithPassAndName, loginWithFaceBookSMS, loginWithPassAndUserName} from '@/api/api'
  import Qs from 'qs'

  export default {
    name: 'Login',
    data() {
      return {
        activeName: 'first',
        loginUser: {
          phone: '',
          sms: ''
        },
        loginWithNamePassWord: {
          account: '',
          password: ''
        },
        loginWithPassWord: {
          account: '',
          password: ''
        },
        send: 'Send SMS',
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false,
        loading: false,
        rules: {
          phone: [
            {required: true, message: 'phone is null'}
          ],
          sms: [
            {required: true, message: 'sms is null'}
          ]
        },
        rulesWithPassword: {
          account: [
            {required: true, message: 'Email or Phone is null'}
          ],
          password: [
            {
              validator: (rule, value, callback) => {
                if (/^(?=.*?[0-9]).{8,}$/.test(value) == false) {
                  callback(new Error('At least 8 or more characters and at least 1 number'))
                } else {
                  callback()
                }
              }, trigger: 'blur'
            },
            {required: true, message: 'password is null'}
          ]
        },
        rulesloginWithNamePassWord: {
          account: [
            {required: true, message: 'Username is null'}
          ],
          password: [
            {
              validator: (rule, value, callback) => {
                if (/^(?=.*?[0-9]).{8,}$/.test(value) == false) {
                  callback(new Error('At least 8 or more characters and at least 1 number'))
                } else {
                  callback()
                }
              }, trigger: 'blur'
            },
            {required: true, message: 'password is null'}
          ]
        },
        langImage: '../../static/usLang.png',
      }
    },
    methods: {
      // 切换语言
      changeLang () {
        if(this.$i18n.locale == 'MM'){
          this.$i18n.locale = 'US'
          this.lang = 'ျမန္မာ'
          this.$store.commit('updateLang', 'US')
          this.langImage = '../../static/myanmar.png'
          localStorage.setItem('lang','US')
        }else if(this.$i18n.locale == 'US'){
          this.$i18n.locale = 'MM'
          this.lang='English'
          this.$store.commit('updateLang', 'MM')
          this.langImage = '../../static/usLang.png'
          localStorage.setItem('lang','MM')
        }
      },
      onSignIn(googleUser) {
        console.log(1)
      },
      // time counter
      timeGo () {
        var self = this
        this.sendMsgDisabled = true
        var timeCount = setInterval(function () {
          if ((self.time--) <= 0) {
            self.time = 60
            self.sendMsgDisabled = false
            window.clearInterval(timeCount)
          }
        }, 1000)
      },
      // message alert 用于前端错误提示信息
      messageToastErr (msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'error'
        })
      },
      // 去掉空格
      trim(str, isGlobal) {
        var result
        result = str.replace(/(^\s+)|(\s+$)/g, '')
        if (isGlobal.toLowerCase() === 'g') {
          result = result.replace(/\s/g, '')
        }
        return result
      },
      // 用户名密码登录
      submitNamePasswordForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let account = this.loginWithNamePassWord.account
            let data = {
              'account': this.translateZTUnicode(account),
              'password': this.translateZTUnicode(this.loginWithNamePassWord.password)
            }
            let params = Qs.stringify(data)
            this.loading = true
            loginWithPassAndUserName(params)
              .then((res) => {
                if (res.data) {
                  var data = res.data
                  // let mes = JSON.parse(res.data.message)
                  if (data.errorID === 0) {
                    localStorage.setItem('username', data.object.name)
                    localStorage.setItem('developerId', data.object.id)
                    localStorage.setItem('account', data.object.account)
                    this.$store.commit('updateUserName', data.object.name)
                    this.$store.commit('updateDeveloperId', data.object.id)
                    this.$store.commit('updateAccount', data.object.account)
                    this.loading = false
                    this.$router.push('/main')
                  } else if (data.errorID === 100012) {
                    this.showToast(data.errorID)
                    this.loading = false
                    this.$router.push('/register')
                  } else if (data.errorID === 100007) {
                    // let msg = data.message || ''
                    // this.showToast(data.errorID, msg)
                    this.showToast(data.errorID, 'error username or password')
                    this.loading = false
                  }  else {
                    this.loading = false
                    this.showToast(data.errorID)
                  }
                }
              })
              .catch((error) => {
                this.loading = false
                this.messageToastErr('error,please try again later')
              })
          } else {
            this.messageToastErr('error submit!!')
            return false
          }
        })
      },
      // 账号密码登录
      submitPasswordForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let account = this.trim(this.loginWithPassWord.account, 'g')
            let data = {
              'account': account,
              'password': this.loginWithPassWord.password
            }
            let params = Qs.stringify(data)
            this.loading = true
            loginWithPassAndName(params)
              .then((res) => {
                if (res.data) {
                  var data = res.data
                  // let mes = JSON.parse(res.data.message)
                  if (data.errorID === 0) {
                    localStorage.setItem('username', data.object.name)
                    localStorage.setItem('developerId', data.object.id)
                    localStorage.setItem('account', data.object.account)
                    this.$store.commit('updateUserName', data.object.name)
                    this.$store.commit('updateDeveloperId', data.object.id)
                    this.$store.commit('updateAccount', data.object.account)
                    this.loading = false
                    this.$router.push('/main')
                  } else if (data.errorID === 100012) {
                    this.showToast(data.errorID)
                    this.loading = false
                    this.$router.push('/register')
                  } else if (data.errorID === 100007) {
                    // let msg = data.message || ''
                    // this.showToast(data.errorID, msg)
                    this.showToast(data.errorID, 'error username or password')
                    this.loading = false
                  } else {
                    this.loading = false
                    this.showToast(data.errorID)
                  }
                }
              })
              .catch((error) => {
                this.loading = false
                this.messageToastErr('error,please try again later')
              })
          } else {
            this.messageToastErr('error submit!!')
            return false
          }
        })
      },
      // Sign In send sms
      submitSms (formName) {
        // if (Number.isInteger(this.loginUser.phone)) {
        if (this.loginUser.phone) {
          let phoneNumber = this.trim(this.loginUser.phone, 'g')
          phoneNumber = phoneNumber.substring(1, phoneNumber.length)
          this.timeGo()
          let data = {
            'phoneNumber': phoneNumber,
            'zone': '+95'
          }
          let params = Qs.stringify(data)
          sendSmsUser(params).then( (res) => {
            if (res.data) {
              var data = res.data
              if (data.errorID === 0) {
                console.log(data)
              } else {
                console.log(data.errorID)
                this.showToast(data.errorID)
              }
            }
          })
            .catch((error) => {
              console.log(error)
              this.messageToastErr('error,please try again later')
            })
        } else {
          this.messageToastErr('error submit!!')
          return false
        }
      },
      // Sign In submit Form
      submitForm: function (formName) {
        var self = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let phoneNumber = this.trim(this.loginUser.phone, 'g')
            let data = {
              'phoneNumber': phoneNumber,
              'zone': '+95',
              'code': self.loginUser.sms
            }
            let params = Qs.stringify(data)
            self.loading = true
            loginUser(params)
              .then((res) => {
                if (res.data) {
                  var data = res.data
                  // let mes = JSON.parse(res.data.message)
                  if (data.errorID === 0) {
                    localStorage.setItem('username', data.object.name)
                    localStorage.setItem('developerId', data.object.id)
                    localStorage.setItem('account', data.object.account)
                    self.$store.commit('updateUserName', data.object.name)
                    self.$store.commit('updateDeveloperId', data.object.id)
                    self.$store.commit('updateAccount', data.object.account)
                    self.loading = false
                    self.$router.push('/main')
                  } else if (data.errorID === 100012) {
                    self.showToast(data.errorID)
                    self.loading = false
                    self.$router.push('/register')
                  } else {
                    console.log(data.errorID)
                    self.loading = false
                    self.showToast(data.errorID)
                  }
                }
              })
              .catch(function (error) {
                if (error.response) {
                  // 请求已经发出，但是服务器响应返回的状态吗不在2xx的范围内
                  console.log(error.response.data)
                  console.log(error.response.status)
                  console.log(error.response.header)
                } else {
                  // 一些错误是在设置请求的时候触发
                  console.log('Error', error.message)
                }
                console.log(error.config)
                self.loading = false
                self.messageToastErr('error,please try again later')
              })
          } else {
            self.messageToastErr('error submit!!')
            return false
          }
        })
      },
      // 谷歌登录成功后回调函数
      onSuccess(googleUser) {
        var googleId = googleUser.getBasicProfile().getId()
        var name = googleUser.getBasicProfile().getName()
        var email = googleUser.getBasicProfile().getEmail()
        let data = {
          'googleId': googleId,
          'googleName': name,
          'googleEmail': email
        }
        let params = Qs.stringify(data)
        loginWithGoogle(params).then((res) => {
          if (res.data) {
            let data = res.data
            if (data.errorID === 0) {
              localStorage.setItem('username', data.object.googleName)
              localStorage.setItem('developerId', data.object.id)
              localStorage.setItem('account', data.object.account)
              this.$store.commit('updateUserName', data.object.googleName)
              this.$store.commit('updateDeveloperId', data.object.id)
              this.$store.commit('updateAccount', data.object.account)
              this.signOutGoogle()
              this.$router.push('/main')
            } else {
              console.log(data.errorID)
              this.showToast(data.errorID)
            }
          }
        }).catch((error) => {
          console.log(error)
          this.messageToastErr('error,please try again later')
        })
      },
      // 谷歌登录失败回调函数
      onFailure (e) {
        console.log("Google login error~")
        this.messageToastErr('error,please try again later')
      },
      //登錄成功后退出谷歌登錄狀態
      signOutGoogle () {
        var auth2 = window.gapi.auth2.getAuthInstance()
        auth2.signOut().then(function () {
          console.log('User signed out.')
        })
      },
      renderButton() {
        window.gapi.signin2.render('googleBtn', {
          'scope': 'profile email',
          'width': 380,
          'height': 40,
          'longtitle': true,
          'theme': 'dark',
          'onsuccess': this.onSuccess,
          'onfailure': this.onFailure
        })
      },
      // FaceBook 登錄按鈕初始化
      faceBookInit () {
        window.fbAsyncInit = function() {
          window.FB.init({
            appId :'1876620675891782',
            xfbml : true,
            version : 'v2.11' //facebook登录版本
          })
        }
      },
      // 調用FaceBook登錄按鈕
      faceBookLogin () {
        window.FB.login((response) =>{
          this.statusChangeCallback(response)
        },{scope: 'public_profile'});
      },
      statusChangeCallback (response) {
        if (response.status === 'connected') {
          FB.api('/me?fields=name,picture,token_for_business',(response) => { // /me为API指定的调用方法，用于获取登陆用户相关信息
            if(response.id){
              this.loginWithFaceBookLast(response)
            }else{
              this.messageToastErr('error,please try again later')
            }
          })
        }
      },
      loginWithFaceBookLast (response) {
        if (response) {
          var facebookId = response.id
          let tokenForBusiness = response.token_for_business;
          var name = response.name
          // var email = response.email
          let data = {
            'facebookId': facebookId,
            'facebookName': name,
            // 'facebookEmail': email,
            'tokenForBusiness': tokenForBusiness,
          }
          let params = Qs.stringify(data)
          loginWithFaceBook(params).then((res) => {
            if (res.data) {
              let data = res.data
              if (data.errorID === 0) {
                localStorage.setItem('username', data.object.facebookName)
                localStorage.setItem('developerId', data.object.id)
                localStorage.setItem('account', data.object.account)
                this.$store.commit('updateUserName', data.object.facebookName)
                this.$store.commit('updateDeveloperId', data.object.id)
                this.$store.commit('updateAccount', data.object.account)
                window.FB.logout(function(response) {
                  // Person is now logged out
                  console.log('feacbook logged out')
                })
                this.$router.push('/main')
              } else {
                console.log(data.errorID)
                this.showToast(data.errorID)
              }
            }
          }).catch((error) => {
            console.log(error)
            this.messageToastErr('error,please try again later')
          })
        }
      },
      //新增 facebook SMS start
      initAccountKit() {
        const tag = document.createElement('script')
        tag.setAttribute(
          'src',
          `https://sdk.accountkit.com/en_US/sdk.js`
        )
        tag.setAttribute('id', 'account-kit')
        tag.setAttribute('type', 'text/javascript')
        tag.onload = () => {
          /* eslint-disable camelcase */
          window.AccountKit_OnInteractive = this.onLoad.bind(this)
          /* eslint-enable camelcase */
        }
        document.head.appendChild(tag)
      },
      onLoad() {
        window.AccountKit.init(
          {
            appId: "1876620675891782",
            state: '1212111',
            version: "v1.1",
            display: "modal",
            fbAppEventsEnabled: true,
            debug: true,
          }
        )
      },
      // login callback
      loginCallback(response) {
        // console.log(response,'response')
        if (response.status === "PARTIALLY_AUTHENTICATED") {
          var code = response.code;
          // var csrf = response.state;
          // Send code to server to exchange for access token
          let data = {
            'code': code,
            // 'csrf': csrf
          }
          let params = Qs.stringify(data)
          loginWithFaceBookSMS(params)
            .then((res) => {
              if (res.data) {
                var data = res.data
                // let mes = JSON.parse(res.data.message)
                if (data.errorID === 0) {
                  localStorage.setItem('username', data.object.facebookName)
                  localStorage.setItem('developerId', data.object.id)
                  localStorage.setItem('account', data.object.account)
                  this.$store.commit('updateUserName', data.object.facebookName)
                  this.$store.commit('updateDeveloperId', data.object.id)
                  this.$store.commit('updateAccount', data.object.account)
                  this.$router.push('/main')
                } else {
                  console.log(data.errorID)
                  this.showToast(data.errorID)
                }
              }
            })
            .catch((error) => {
              this.showToast('No internet, please try again')
            })
        }
        else if (response.status === "NOT_AUTHENTICATED") {
          console.log('Not Authenticated')
        }
        else if (response.status === "BAD_PARAMS") {
          this.messageToastErr('Bad Params')
        }
      },

      // phone form submission handler
      smsLogin() {
        window.AccountKit.login('PHONE', {}, this.loginCallback)
      },

      translateZTUnicode(str){
        if (!str) return false;
        return this.$translateLang(str, 'zawgyiTounicode')
      },
    },
    mounted() {
      this.renderButton()
      if (!window.AccountKit) {
        this.initAccountKit()
      }
      localStorage.setItem('username', '231431234')
      localStorage.setItem('developerId', 123)
      localStorage.setItem('account', 123123)
      this.$store.commit('updateUserName', '231431234')
      this.$store.commit('updateDeveloperId', 123)
      this.$store.commit('updateAccount', 123)
      // this.faceBookInit()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  #login{
    min-height: 740px;
  }
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    /* margin: 180px auto; */
    margin: 0 auto;
    width: 380px;
    padding: 35px 35px 25px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    margin-bottom: 50px;
    position: relative;
  }
  .login-container .title {
    margin: 0px auto 10px auto;
    padding: 10px 0;
    text-align: center;
    color: #505458;
  }

  .login-container .remember {
    margin: 0px 0px 35px 0px;
  }

  .smsBtn {
    width: 100%;
    padding: 12px 5px;
  }

  .login-title-logo {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  .login-title-logo .logo-header {
    width: 100px;
  }

  .login-title-logo .title-name {
    margin: 0;
    font-size: 18px;
    color: rgb(255, 153, 0);
  }

  .login-title-logo .balck {
    margin: 0.4em 0 2em 0;
  }
  .login-container .el-tabs--card>.el-tabs__header .el-tabs__nav {
     border: none;
  }
  .login-container  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-bottom-color:#FF9900;
  }
  .login-container .el-tabs--card>.el-tabs__header .el-tabs__item{
    border-left:none;
  }
  .login-container  .el-tabs__item{
    padding:0;
    flex:1;
    text-align:center;
  }
  .login-container .el-tabs__nav{
    width:100%;
    display:flex;
  }
  .login-container .el-tabs__active-bar {
    background-color: #FF9900;
  }

  .login-container .el-tabs__item:hover, .login-container .el-tabs__item.is-active {
    color: #FF9900;
  }

  .login-container .el-button--warning {
    background-color: #FF9900;
    border-color: #FF9900;
  }

  .index-page-a {
    text-decoration: none;
    color: #FF9900;
  }
  .google-btn{
    width:100%;
    height:40px;
  }
  .google-btn .abcRioButtonBlue .abcRioButtonIcon{
    background-color: transparent;
  }
  .google-btn .abcRioButtonBlue{
    background-color: #fff;
    box-shadow:none;
    border-radius:5px;
    border:1px solid #888;
    color:#444;
  }
  .google-btn .abcRioButtonBlue .abcRioButtonContentWrapper{
    border:none;
  }
  .google-btn .abcRioButtonBlue:hover{
    background-color: #fff;
    box-shadow:none;
  }
  .login-container .facebook-btn{
    background-color: #3b5998 !important;
    border:1px solid #3b5998 !important;
    color:#fff !important;
  }
  .login-container .facebook-btn:hover{
    background-color: #5477c0 !important;
    border:1px solid #5477c0 !important;
    color:#fff !important;
  }
  .login-container .facebook-icon{
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    margin: 10px;
    background-size:100% 100%;
  }
  .login-container  .abcRioButtonContents:before{
    content: 'Login with Google';
    top:0;
    left:0;
  }
  .login-container .facebook-btn span{
    margin-left:30px;
  }
  .login-container  .abcRioButtonContents{
    margin-left:0;
  }
  .login-container  .abcRioButtonContents span {
    display:none
  }
  .lang-img {
    position: absolute;
    cursor: pointer;
    padding: 5px;
    right: 15px;
    top: 15px;
  }
</style>
